<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('个人综合业绩详情')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<div class="flot-chart" style="height: 300px">
			<div class="flot-chart-content" id="info-chart"></div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: echarts-js" />
	<script type="text/javascript" th:inline="javascript">
		var bagNameList = new Array();
		var scoreList = new Array();
		var data = [[${perInfoList}]];

		// 基于准备好的dom，初始化echarts实例
		var infoChart = echarts.init(document.getElementById('info-chart'));

		for(var i=0;i<data.length;i++){
			bagNameList.push(data[i].bagName);
			scoreList.push(data[i].score)
		}

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '个人综合业绩详情'
			},
			tooltip: {},
			legend: {
				data:['业绩']
			},
			xAxis: {
				data: bagNameList,
				name:"123",//坐标轴名称。
				nameLocation:'end',//坐标轴名称显示位置。
				axisLabel : {//坐标轴刻度标签的相关设置。
					interval:0,
					rotate:"20"
				}
			},
			yAxis: {},
			series: [{
				name: '业绩',
				type: 'bar',
				data: scoreList
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		infoChart.setOption(option);

		function submitHandler() {
			$.modal.close();
		}
	</script>
</body>
</html>
